/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *    Kyle Kemp
 *      - Twitter: @seiyria
 *      - Github:  seiyria
 *    Rohit Kalkur
 *      - Twitter: @Rovolutionary
 *      - Github:  rovolution
 *
 * =========================================================
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

//
// Custom hand-made for LeanCloud
// Tunghsiao Liu - Jul 20, 2015, 6:00 PM
//

@slider-line-height: 30px;

.slider {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  &.slider-horizontal {
    width: 210px;
    height: @slider-line-height;
    .slider-track {
      height: (@slider-line-height / 2 - 1px);
      width: 100%;
      margin-top: (-@slider-line-height/4);
      top: 50%;
      left: 0;
    }
    .slider-selection, .slider-track-low, .slider-track-high {
      height: 100%;
      top: 0;
      bottom: 0;
    }
    .slider-tick,
    .slider-handle {
      margin-left: (-@slider-line-height/3);
      margin-top: (-@slider-line-height/10);
      &.triangle {
        border-width: 0 (@slider-line-height/2) (@slider-line-height/2) (@slider-line-height/2);
        width: 0;
        height: 0;
        border-bottom-color: #0480be;
        margin-top: 0;
      }
    }
    .slider-tick-label-container {
      white-space: nowrap;
      margin-top: @slider-line-height;

      .slider-tick-label {
        padding-top: @slider-line-height * .2;
        display: inline-block;
        text-align: center;
      }
    }
  }
  &.slider-vertical {
    height: 210px;
    width: @slider-line-height;
    .slider-track {
      width: (@slider-line-height/2);
      height: 100%;
      margin-left: (-@slider-line-height/4);
      left: 50%;
      top: 0;
    }
    .slider-selection {
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .slider-track-low, .slider-track-high {
      width: 100%;
      left: 0;
      right: 0;
    }
    .slider-tick,
    .slider-handle {
      margin-left: (-@slider-line-height/4);
      margin-top: (-@slider-line-height/2);
      &.triangle {
        border-width: (@slider-line-height/2) 0 (@slider-line-height/2) (@slider-line-height/2);
        width: 1px;
        height: 1px;
        border-left-color: #0480be;
        margin-left: 0;
      }
    }
  }
  &.slider-disabled {
    .slider-handle {
      #gradient > .vertical(#dfdfdf, #bebebe);
    }
    .slider-track {
      #gradient > .vertical(#e5e5e5, #e9e9e9);
      cursor: not-allowed;
    }
  }
  input {
    display: none;
  }
  .tooltip {
    pointer-events: none;
    transition: opacity .2s ease;

    &.top {
      margin-top: -40px;
    }
  }
  .tooltip-inner {
    white-space: nowrap;
  }
  .hide {
    display: none;
  }
}
.slider-track {
  position: absolute;
  cursor: pointer;
  background: #f1f1f1;
  border-radius: @slider-line-height;
}
.slider-selection {
  position: absolute;
  background: @link-color;
  border-radius: @slider-line-height;
}
.slider-selection.tick-slider-selection {
  background: @link-color;
}
.slider-track-low, .slider-track-high {
  position: absolute;
  background: transparent;
  border-radius: @slider-line-height;
}
.slider-handle {
  position: absolute;
  width: (@slider-line-height / 1.5);
  height: (@slider-line-height / 1.5);
  background-color: #fff;
  filter: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.1);
  border: 0px solid transparent;

  &:active,
  &:focus {
    .form-focus(@brand-primary, 15%);
    box-shadow+: 0 0 0 1px fade(@link-color, 60%), 0 2px 4px rgba(0,0,0,.1);
  }
  &.round {
    border-radius: 50%;
  }
  &.triangle {
    background: transparent none;
  }
  &.custom {
    background: transparent none;
    &::before{
      line-height: @slider-line-height;
      font-size: 20px;
      content: '\2605'; //unicode star character
      color: #726204;
    }
  }
}
.slider-tick {
  display: none;
  position: absolute;
  width: @slider-line-height;
  height: @slider-line-height;
  background: #f1f1f1;
  filter: none;
  opacity: 0.8;
  border: 0px solid transparent;
  &.round {
    border-radius: 50%;
  }
  &.triangle {
    background: transparent none;
  }
  &.custom {
    background: transparent none;
    &::before{
      line-height: @slider-line-height;
      font-size: 20px;
      content: '\2605'; //unicode star character
      color: #726204;
    }
  }
  &.in-selection {
    background: @link-color;
    opacity: 1;
  }
}
